<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-tooltip
          class="box-item"
          content="向下填充"
          effect="dark"
          placement="top">
          <el-button icon="el-icon-bottom" type="text" size="small" @click="toDown"></el-button>
        </el-tooltip>
        <span>{{ row_data.day }}</span>
        <el-tooltip
          class="box-item"
          content="向右填充"
          effect="dark"
          placement="top">
          <el-button icon="el-icon-right" type="text" size="small" @click="toRight"></el-button>
        </el-tooltip>
      </div>
    </template>
    <div v-for="(item,index) in (row_data.contentList)" :key="index" class="ctx-container">
      <span class="ctx-sailings">({{ item.sailings }})</span>
      <span class="ctx-status">{{ item.status }}</span>
      <span class="ctx-time">{{ item.startTime }}</span>
      <span class="ctx-time">-</span>
      <span class="ctx-time">{{ item.endTime }}</span>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'TablePane',
  props: ['row_data', 'row_idx', 'col_idx'],
  data () {
    return {}
  },
  methods: {
    toRight () {
      this.$emit('to-right', {
        row_idx: this.row_idx,
        col_idx: this.col_idx
      })
    },
    toDown () {
      this.$emit('to-down', {
        row_idx: this.row_idx,
        col_idx: this.col_idx
      })
    }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  width: 100%;
}

:deep(.el-card__header) {
  padding: 5px;
}

:deep(.el-card__body) {
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ctx-container {
  font-size: 12px;
}

.ctx-container span {
  margin-right: 2px;
}

.ctx-status {
  color: #409eff;
}

.ctx-time {
  color: #f56c6c;
}
</style>
